<template>
	<div id="role">
		<el-container>
			<div class="top">
				<el-input placeholder="请输入角色名" v-model="find"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="seek">查找</el-button>
				<el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible = true">添加</el-button>
			</div>
			<el-main>
				<el-table :data="tableData" border stripe style="width: 100%">
					<el-table-column prop="name" label="角色名称" sortable></el-table-column>
					<el-table-column prop="desc" label="说明"></el-table-column>
					<el-table-column prop="operation" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="alter(scope.row),dialogEditVisible = true">编辑
							</el-button>
							<el-button size="mini" type="danger" @click="deleteRow(scope.row)">
								删除</el-button>
							<el-button size="mini" type="primary"
								@click="configure(scope.index,scope.row),dialogPowerVisible = true">授权</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 添加 -->
				<el-dialog title="创建" :visible.sync="dialogFormVisible">
					<el-form :model="forms">
						<el-form-item prop="name" label="角色名称" :label-width="formLabelWidth" :rules="[
						{ required: true, message: '角色名称不能为空', trigger: 'blur' }]">
							<el-input autocomplete="off" v-model="forms.name"></el-input>
						</el-form-item>
						<el-form-item label="说明" :label-width="formLabelWidth">
							<el-input autocomplete="off" v-model="forms.desc"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="add()">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 修改 -->
				<el-dialog title="修改信息" :visible.sync="dialogEditVisible">
					<el-form :model="form">
						<el-form-item label="*角色名称" :label-width="formLabelWidth">
							<el-input v-model="form.name" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item label="说明" :label-width="formLabelWidth">
							<el-input v-model="form.desc" auto-complete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogEditVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogEditVisible = false,amend()">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 权限 -->
				<el-dialog title="权限配置" :visible.sync="dialogPowerVisible">
					<el-tree :data="tree" ref="roleds" :show-checkbox="true" :accordion="true"
						:default-checked-keys="roleData" node-key="id">
					</el-tree>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogPowerVisible = false">取 消</el-button>
						<el-button type="primary" @click="jurisdiction">确 定</el-button>
					</div>
				</el-dialog>
			</el-main>
			<!-- 分页 -->
			<el-footer>
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40,50,100]" :page-size="10"
					layout="total, sizes, prev, pager, next, jumper" :total="paging">
				</el-pagination>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				find: '', //查找
				// 添加
				dialogFormVisible: false,
				errmsg: '',
				forms: {
					name: '',
					desc: ''
				},
				tableData: [], //表格
				formLabelWidth: "80px",
				// 修改
				dialogEditVisible: false,
				form: {
					id: '',
					name: '',
					desc: ''
				},
				//权限
				dialogPowerVisible: false,
				tree: [], //权限数据
				roleData: [],
				uid: 0, //权限列表
				paging: 0 //分页
			}
		},
		created() {
			// 数据渲染
			this.bloated()
		},
		methods: {
			// 获取数据
			bloated() {
				this.axios.get("/api/admin/role/list").then((response) => {
					this.tableData = response.data.data.list
					this.paging = response.data.data.total
					// console.log(response.data.data.list)
				})
			},
			// 查找
			seek() {
				this.axios.get(`/api/admin/role/list?name=${this.find}`).then(res => {
					this.tableData = res.data.data.list
				})
			},
			// 添加
			add() {
				this.axios.post(`/api/admin/role/create`, {
					name: this.forms.name,
					desc: this.forms.desc,
				}).then(res => {
					this.errmsg = res.data.errmsg
					if (this.errmsg == "成功") {
						this.$notify({
							title: '成功',
							message: '添加角色成功',
							type: 'success'
						});
						this.bloated();
						this.forms.name = ''
						this.forms.desc = ''
						this.dialogFormVisible = false
					} else {
						this.$notify.error({
							title: '失败',
							message: '角色已经存在',
							type: 'success'
						});
						this.dialogFormVisible = true
					}
				}).catch(err => {
					console.log("失败")
				})
			},
			// 修改编辑
			alter(index) {
				this.form.name = index.name
				this.form.desc = index.desc
				this.form.id = index.id
			},
			amend() {
				this.axios.post(`/api/admin/role/update`, {
					id: this.form.id,
					name: this.form.name,
					desc: this.form.desc
				}).then(res => {
					// console.log(res)
					this.errmsg = res.data.errmsg
					if (this.errmsg == "成功") {
						this.$notify({
							title: '成功',
							message: '更新管理员成功',
							type: 'success'
						});
						this.bloated();
						this.dialogEditVisible = false
					} else {
						this.$notify.error({
							title: '错误',
							message: '系统内部错误，请联系管理员维护'
						});
						this.dialogEditVisible = true
					}
				}).catch(err => {
					this.$notify.error({
						title: '失败',
						message: '更新管理员失败'
					});
				})
			},
			// 删除
			deleteRow(index) {
				this.axios.post(`/api/admin/role/delete`, {
					id: index.id,
					name: index.name,
					desc: index.desc
				}).then(res => {
					// console.log(res)
					this.errmsg = res.data.errmsg
					if(this.errmsg=="当前角色存在管理员，不能删除"){
						this.$notify.error({
							title: '失败',
							message: '当前角色存在管理员，不能删除',
							type: 'success'
						});
					}else{
						this.$notify({
							title: '成功',
							message: '删除管理员成功',
							type: 'success'
						});
						this.bloated();
					}
				}).catch(err => {
					this.$notify.error({
						title: '失败',
						message: '删除管理员失败',
						type: 'success'
					});
				})
			},
			// 权限渲染数据
			configure(index, row) {
				this.uid = row.id
				this.axios.get(`/api/admin/role/permissions?roleId=${row.id}`).then(res => {
					this.roleData = res.data.data.assignedPermissions
					this.tree = res.data.data.systemPermissions
				}).catch(err => {
					console.log("失败")
				})
			},
			// 配置权限
			jurisdiction() {
				let took = this.$refs.roleds.getCheckedKeys()
				this.axios.post(`/api/admin/role/permissions`, {
					roleId: this.uid,
					permissions: took
				}).then(res => {
					this.$notify({
						title: '成功',
						message: '授权成功',
						type: 'success'
					});
				}).catch(err => {
					this.$notify.error({
						title: '失败',
						message: '授权失败',
						type: 'success'
					});
				})
				this.dialogPowerVisible = false
			},
			// 分页
			handleCurrentChange(asti) {
				this.axios.get(`/api/admin/role/list?page=${asti}`).then((res) => {
					this.tableData = res.data.data.list
				})
			},
			handleSizeChange(stt) {
				this.axios.get(`/api/admin/role/list?limit=${stt}`).then((res) => {
					this.tableData = res.data.data.list
				})
			},
		}
	}
</script>

<style>
	#role .top {
		line-height: 70px;
		height: 70px !important;
		margin-left: 20px;
	}

	#role .top .el-input {
		width: 200px;
		margin-right: 10px;
	}

	#role .top .el-button {
		margin-top: 19px;
		height: 40px;
	}

	#role .el-main {
		padding: 0px 20px;
		padding-bottom: 5px;
	}

	#role .el-table__body tr .cell {
		text-align: center;
	}

	#role .has-gutter tr th {
		text-align: center;
	}

	#role .el-footer {
		border-bottom: 0px;
	}

	#role .el-form-item {
		font-weight: 700;
		color: #373737;
	}
</style>
